@use "sass:color";
@use "sass:math";
@use "sass:map";
@use "grid";
@use "breakpoint";
@use "gutter";
.yigezi {
    box-sizing: border-box;
    .row {
        box-sizing: border-box;
        // 默认采用flex布局
        display: flex;

        // 默认换行
        flex-wrap: wrap;

        // 默认水平方向
        flex-direction: row;

        // 不换行
        &.nowrap {
            flex-wrap: nowrap;
        }

        // 垂直方向
        &.column {
            flex-direction: column;
        }

        // 水平居中
        &.justify-center {
            justify-content: center;
        }

        // 垂直居中
        &.items-center {
            align-items: center;
        }

        // 固定大小
        &.fixed-size {
        }

        @each $gutterKey, $gutterValue in gutter.$gutter {
            &.gutter-#{$gutterKey} > .col {
                padding: $gutterValue;
            }
        }

        // 列元素
        & > .col {
            box-sizing: border-box;
            .col-wrapper {
                height: 100%;
                width: 100%;
                box-sizing: border-box;
            }
            // $devideKey 平分数
            // $valueList 值列表
            @each $devideKey, $valueList in grid.$grid {
                @each $value in $valueList {
                    &.fix-#{$value}-#{ $devideKey} {
                        $width: math.div($value, $devideKey) * 100%;
                        flex: 0 0 $width;
                    }
                }
            }
            @media screen and (max-width: breakpoint.$sm) {
                @each $devideKey, $valueList in grid.$grid {
                    @each $value in $valueList {
                        &.sm-#{$value}-#{ $devideKey} {
                            $width: math.div($value, $devideKey) * 100%;
                            flex: 0 0 $width;
                        }
                    }
                }
            }
            @media screen and (min-width: breakpoint.$sm) and (max-width: breakpoint.$mb) {
                @each $devideKey, $valueList in grid.$grid {
                    @each $value in $valueList {
                        &.mb-#{$value}-#{ $devideKey} {
                            $width: math.div($value, $devideKey) * 100%;
                            flex: 0 0 $width;
                        }
                    }
                }
            }
            @media screen and (min-width: breakpoint.$mb) and (max-width: breakpoint.$pad) {
                @each $devideKey, $valueList in grid.$grid {
                    @each $value in $valueList {
                        &.pad-#{$value}-#{ $devideKey} {
                            $width: math.div($value, $devideKey) * 100%;
                            flex: 0 0 $width;
                        }
                    }
                }
            }
            @media screen and (min-width: breakpoint.$pad) and (max-width: breakpoint.$pc) {
                @each $devideKey, $valueList in grid.$grid {
                    @each $value in $valueList {
                        &.pc-#{$value}-#{ $devideKey} {
                            $width: math.div($value, $devideKey) * 100%;
                            flex: 0 0 $width;
                        }
                    }
                }
            }
            @media screen and (min-width: breakpoint.$lg) {
                @each $devideKey, $valueList in grid.$grid {
                    @each $value in $valueList {
                        &.lg-#{$value}-#{ $devideKey} {
                            $width: math.div($value, $devideKey) * 100%;
                            flex: 0 0 $width;
                        }
                    }
                }
            }
        }
    }
}
